<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="content-box">
		<view class="edit-box">
			<view class="edit-item flex-row-center">
				<text class="edit-name">助教分成比例(%)</text>
				<view class="edit-content">
					<up-number-box min="0" step="1" max="100" v-model="storeInfo.rate" @change="changeRate">
						<template #minus>
							<view class="minus-btn flex-center">
								<up-icon name="minus" color="#0B2532" size="24rpx"></up-icon>
							</view>
						</template>
						<template #input>
							<up-input type="number" v-model="storeInfo.rate" @confirm="confirmRate" fontSize="28rpx"
								inputAlign="center" color="#fff" border="none" :customStyle="{width:'120rpx'}">
							</up-input>
						</template>
						<template #plus>
							<view class="plus-btn flex-center">
								<up-icon name="plus" color="#102C38" size="24rpx"></up-icon>
							</view>
						</template>
					</up-number-box>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useLogout
	} from '@/hooks/useLogout.js';
	import {
		userInfoStore
	} from '../../stores/user';
	import {
		reactive
	} from 'vue';
	const userStore = userInfoStore();
	const storeInfo = reactive({
		rate: 0,
		id: 0,
	})

	const modalshow = ref(false);
	onLoad((option) => {
		if (option.storeId) {
			storeInfo.id = option.storeId;
		}
		if (option.rate) {
			storeInfo.rate = option.rate;
		}
	});
	const changeRate = async (e) => {
		const res = await $Api.store.setAssistantRate({
			rate: e.value,
			id: storeInfo.id
		});
		if (res.code == 1) {
			uni.$emit('updateRate', {
				rate: e.value
			})
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const confirmRate = async (e) => {
		const res = await $Api.store.setAssistantRate({
			rate: e,
			id: storeInfo.id
		});
		if (res.code == 1) {
			uni.$emit('updateRate', {
				rate: e
			})

		} else {
			uni.$u.toast(res.msg)
		}
	}
</script>


<style lang="scss" scoped>
	.content-box {
		padding-bottom: 24rpx;
	}

	.edit-box {
		width: 710rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 24rpx;
		background-color: #222528;
		padding: 18rpx 34rpx;
		border-radius: 18rpx;

		.edit-item {
			justify-content: space-between;
			min-height: 144rpx;
			padding: 18rpx 0;
			box-sizing: border-box;

			::v-deep.placeholderClass {
				color: #5B6868 !important;
				font-size: 26rpx;
				font-weight: 500;
			}

			&:not(:last-child) {
				border-bottom: 1rpx solid #666;
			}

			.edit-name {
				font-weight: 500;
				font-size: 28rpx;
				color: #CACBCB;
				flex-shrink: 0;
				margin-right: 24rpx;
			}

			.state {
				font-weight: 400;
				font-size: 28rpx;
				color: #CACBCB;
				margin-right: 12rpx;
			}

			.ava {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				margin-right: 18rpx;
			}

			.unit {
				font-size: 28rpx;
				color: $name-color;
			}

			.content-text {
				font-weight: 500;
				font-size: 28rpx;
				color: #A5A6A7;
			}
		}



	}

	.minus-btn {
		width: 34rpx;
		height: 34rpx;
		background: #A7A8A9;
		border-radius: 4rpx;
	}

	.input-num {
		width: 64rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
	}

	.plus-btn {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
		box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(108, 199, 190, 0.38);
		border-radius: 4rpx;
	}

	.edit-btn {
		margin: 0 auto;
		margin-top: 120rpx;
		width: 520rpx;
		height: 72rpx;
		border-radius: 36rpx;
		border: 1rpx solid #F56C6C;
		color: #F56C6C;
	}
</style>